<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1.导入vue 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" name="todoitem" v-model="newitem">
    <button v-on:click="add">添加</button>
    <hr>
    <ul>
        <li v-for="(item, index) in items">
            <a href="javascript:;" v-on:click="up(index)">↑</a>
            {{ item }}
            <a href="javascript:;" v-on:click="deleteitem(index)">删除</a>
            <a href="javascript:;" v-on:click="down(index)">↓</a>
        </li>
    </ul>
</div>


</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'hello',
            items: ['java', 'C++', 'Python'],
            newitem: '',
        },

        methods: {
            add: function () {
                this.items.push(this.newitem);
                this.newitem = '';
            },
            deleteitem: function (index) {
                this.items.splice([index], 1);
            },
            up: function (index) {
                if( index != 0){
                    // 1.获取当前的元素
                    current = this.items[index]
                    // 2.先把当前的元素删除
                    this.items.splice(index, 1)
                    // 3.再添加, 添加的时候让它的索引-1
                    this.items.splice(index - 1, 0, current)
                }
            },
            down: function (index) {
                // 1.获取当前的元素
                current = this.items[index]
                // 2.先把当前的元素删除
                this.items.splice(index, 1)
                // 3.再添加, 添加的时候让它的索引+1
                this.items.splice(index + 1, 0, current)
            }
        }
    })
</script>

</html>